import React, { useState, useRef, useEffect, } from 'react';
import { Progress, message } from 'antd';
import videoBg from '../images/video.png'
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import styles from './index.less';
import { isImg, isVideo, uid } from '@/utils';
import InnerUpload, { InnterUploadProps } from '../InnerUpload';
import classNames from 'classnames';
import { allGet } from '@/services/pc';



type PlvVideoListModalUploadProps = {
  max?: number;
  size?: number;
  onChange?: (fileList: any[]) => void;
  value?: any[],
  payload?: {}
  action: string;
  name?: string;
  getAliyunAuth?: () => Promise<any>
  refreshAliyunAuth?: () => Promise<any>
  onSuccess?: (fileList, file,) => void;
  onPreview?: (file) => void;
  onRemove?: (file) => void;

} & Partial<Pick<InnterUploadProps, 'videoUploadto' | 'getPlvAuth' | 'refreshPlvAuth'>>

const PlvVideoListModalUpload: React.FC<PlvVideoListModalUploadProps> = ({
  size = 50,
  max = 30,
  onChange,
  value = [],
  payload = {},
  action,
  name = 'file',
  onSuccess,
  onPreview,
  onRemove,
  videoUploadto = 'Plv',
  getPlvAuth,
  refreshPlvAuth,
  children,
}) => {
  const [collapsed, setCollapsed] = useState(false);
  const fileListCount = useRef(0);
  const [fileList, setFlieList] = useState<any[]>(value);


  const beforeUpload = async file => {
    const isvideo = isVideo(file.name);
    // 格式不符合
    if (!isvideo) {
      message.error(' 视频仅支持 avi/mp4/mov 格式');
      return false;
    }



    // 数量超出
    if (fileListCount.current >= max) {
      message.error(`最多上传 ${max} 个文件`);
      return false;
    }
    file.key = file?.uid || uid();
    fileListCount.current++;
    return file;
  };

  const getExtraData = file => {
    return payload;
  };


  const handleUploadChange = async (fileList) => {
    console.log(fileList, '2')
    setFlieList(fileList);
    onChange?.(fileList)
  }



  const handleSuccess = async (fileList, file) => {
    onSuccess?.(fileList, file);
  }


  const upLoadProps = {
    fileList,
    onChange: handleUploadChange,
    name,
    action,
    data: getExtraData,
    beforeUpload: beforeUpload,
    onSuccess: handleSuccess,
    videoUploadto,
    getPlvAuth,
    refreshPlvAuth,

  };
  const handlePreview = item => {
    onPreview?.(item);
  }
  const UploadRef = useRef<any>();
  const handleStop = item => {
    UploadRef.current?.stopFile?.(item)
  }

  const handleResumeFile = item => {
    UploadRef.current?.resumeFile?.(item)
  }

  const handleRemoveFile = item => {
    UploadRef.current?.removeFile?.(item)
    fileListCount.current--;
  }

  const renderFileList = () => {
    return fileList.map(item => {
      return <div key={item.uid} className={classNames(styles.item, { [styles.stop]: item.status === 'stop', [styles.done]: item.status === 'done', [styles.error]: item.status === 'error' })} >
        <i className={styles.icon}></i>
        <div className={styles.main}>
          <div className={styles.info}>
            <div className={styles.title}>{item.name}</div>
            <div className={styles.right}>
              <div className={styles.status}>
                {item.status === 'stop' && '已暂停'}
                {item.status === 'done' && '上传成功'}
                {item.status === 'uploading' && (item.percent || 0) + '%'}
                {item.status === 'error' && '上传失败'}
              </div>
              {item.status === 'uploading' && <i className={classNames(styles.handle, styles.stop)} onClick={() => handleStop(item)}></i>}
              {item.status === 'stop' && <i className={classNames(styles.handle, styles.start)} onClick={() => handleResumeFile(item)}></i>}
              <i className={classNames(styles.handle, styles.delete)} onClick={() => handleRemoveFile(item)}></i>

            </div>
          </div>
          <div className={styles.process}>
            <i className={styles.inner} style={{ width: item.percent + '%' }} />
          </div>
        </div>
      </div>
    }
    )
  }
  const successNum = fileList.filter(item => item.status === 'done').length;
  const title = () => {
    if (fileList.length === 0) {
      return '选择文件上传'
    }
    if (fileList.length > 0 && successNum === fileList.length) {
      return '上传完毕'
    }
    return '上传视频中...'
  }
  return <div >
    <InnerUpload ref={UploadRef} className={styles.drag} {...upLoadProps} multiple >
      {children}
    </InnerUpload>
    {fileList.length > 0 && <div className={styles.modelWrapper}>
      <div className={styles.header}>
        {title()}
        <div className={styles.step}>({successNum}/{fileList.length})</div>
        <i className={classNames(styles.collapsible, { [styles.collapsed]: collapsed })} onClick={() => setCollapsed(!collapsed)}></i>
      </div>
      <div className={classNames(styles.body, { [styles.collapsed]: collapsed })}>
        {renderFileList()}
      </div>
    </div>}
  </div>

}


export default PlvVideoListModalUpload;

